<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/elementui-chalk.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <!-- https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css -->

</head>

<body>

    <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>

        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button type="primary">主要按钮</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button type="success">成功按钮</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button type="info">信息按钮</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button type="warning">警告按钮</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button plain>朴素按钮</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button>默认按钮</el-button>
                </div>
            </el-col>
        </el-row>






        <el-button type="danger">危险按钮</el-button>
    </div>

    <!-- import Vue before Element -->
    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
    <script src="./js/vue.js"></script>
    <!-- 引入组件库 -->
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <script src="./js/elementui.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return { visible: false }
            }
        })
    </script>
</body>

</html>